<template>
	<!-- <button ref="backHome" @click="backHome">返回主页</button> -->
	<FormScore v-if="isFinish"></FormScore>
	<!-- <button  @click="isFinish = !isFinish">提交分数</button> -->
	<button class="return" @click="backHome">
		<svg
			t="1666961452971"
			class="icon"
			viewBox="0 0 1024 1024"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			p-id="2943"
			width="20"
			height="20">
			<path
				d="M73.142857 490.569143L565.248 1024l95.085714-96.548571-320.512-343.332572 611.035429 1.462857v-146.285714H317.732571l344.649143-344.795429L565.248 0z"
				p-id="2944"
				fill="#ffffff"></path>
		</svg>
	</button>
	<div class="container">
		<div class="heading">
			<h1 class="title">2048</h1>
			<div class="scores-container">
				<div class="score-container scoreBoard">0</div>
				<div class="best-container">0</div>
			</div>
		</div>

		<div class="above-game">
			<p class="game-intro">
				<strong>使用方向键移动方块</strong>
			</p>
			<a class="restart-button">重新开始</a>
		</div>

		<div class="game-container">
			<div class="game-message">
				<p></p>
				<div class="lower">
					<a class="keep-playing-button">继续游戏</a>
					<a class="retry-button">在来一局</a>
					<a class="sendscore-button" @click="isFinish = !isFinish">提交分数</a>
				</div>
			</div>

			<div class="grid-container">
				<div class="grid-row">
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
				</div>
				<div class="grid-row">
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
				</div>
				<div class="grid-row">
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
				</div>
				<div class="grid-row">
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
					<div class="grid-cell"></div>
				</div>
			</div>
			<div class="tile-container"></div>
		</div>
	</div>
</template>

<script>
	import { KeyboardInputManager } from './keyboard_input_manager.js';
	import { HTMLActuator } from './html_actuator.js';
	import { LocalStorageManager } from './local_storage_manager.js';
	import { GameManager } from './game_manager.js';
	import FormScore from './FormScore';
	export default {
		name: 'GameOne',
		data() {
			return {
				score: 0,
				isFinish: false,
			};
		},
		components: {
			FormScore,
		},
		methods: {
			backHome() {
				this.$router.push({
					name: 'homepage',
				});
			},
		},
		mounted() {
			window.requestAnimationFrame(function () {
				new GameManager(
					4,
					KeyboardInputManager,
					HTMLActuator,
					LocalStorageManager
				);
			});
			// this.score = JSON.parse(localStorage.getItem('gameState')).score;
			// console.log(
			// 	'mounted',
			// 	JSON.parse(localStorage.getItem('gameState')).score
			// );
		},
		updated() {
			// console.log(
			// 	'updated',
			// 	JSON.parse(localStorage.getItem('gameState')).score
			// );
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	button {
		position: absolute;
		left: 30px;
	}
	.return {
		position: fixed;
		top: 20px;
		left: 30px;
		font-size: 20px;
		font-weight: bolder;
		padding: 8px 15px 5px 15px;
		border: none;
		background-color: #8f7a66;
		border-radius: 15%;
		color: white;
	}
	.scoreBoard {
		margin: 0 20px;
	}
</style>
